<template>
  <el-row class="common-pd-page arrange-inp-box">
    <HPModuleTitle v-if="titleVisiable" :titleText="'取消面试'" />
    <el-form
      :label-position="'right'"
      ref="formData"
      :rules="cancelForm"
      label-width="120px"
      :model="formData"
      :class="'form-box'"
    >
      <el-col :span="20" :class="'arrange-form-item'">
        <el-form-item label="备注：" prop="remarks">
          <el-input v-model="formData.remarks" type="textarea" :maxlength="500"></el-input>
        </el-form-item>
        <p class="cancel-tips">请注意，取消面试即关闭候选人的所有面试流程，请谨慎操作。若需修改面试时间，请点击原面试时间进行修改。</p>
      </el-col>
      <el-col :span="20" :class="'arrange-form-item'">
        <el-form-item>
          <el-button
            :class="'save-md-btn'"
            :disabled="isCan"
            @click="sendFeedBackInfo('formData')"
            >发送</el-button
          >
        </el-form-item>
      </el-col>
    </el-form>
  </el-row>
</template>
<script>
import HPModuleTitle from "@/components/HPModuleTitle.vue";
import { cancelInterview } from '../../fetch/modules/arrange'

export default {
  components: {
    HPModuleTitle,
  },
  props: {
    interviewId: {
      type: String,
      default: "",
    },
    needsCvId: {
      type: [String, Number],
      default: "",
    },
    isCloseNeeds: {
      type: Boolean,
      default: false,
    },
    interviewTime: {
      type: String,
      default: "",
    },
    titleVisiable: {
      type: Boolean,
      default: true
    },
    onSubmit: {
      type: Function,
      default: null
    },
    interviewType: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      formData: {
        remarks: null,
        interviewId: "",
      },
      isCan: false,
      pickerOptions: {
      },
      timeOption: {},
      defaultTime: "",
      cancelForm: {
        remarks: [
          {
            required: true,
            message: "请输入备注",
            trigger: "blur",
          },
        ],
      },
    };
  },
  beforeMount() {
    let id = this.$route.params.id;
  },
  mounted() {},
  methods: {
    sendFeedBackInfo(val, ev) {
      let self = this;
      this.formData.interviewId = this.interviewId;
      this.formData.needsCvId = this.needsCvId;
      // this.formData.tempTime = `${ this.formData.inverviewDate.split(" ")[0] } ${this.formData.inverviewTime}:00`;
      // console.log(this.formData)
      this.$refs['formData'].validate((valid) => {
        console.log(valid)
        if (valid) {
          if(this.onSubmit) {
            this.onSubmit(this.formData)
            return
          }

          this.$confirm("是否取消面试安排?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            customClass: "d-message-box",
            confirmButtonClass: "mes-confir-btn",
            cancelButtonClass: "mes-cancel-btn",
          })
            .then(() => {
              const params = {
                id: this.formData.interviewId,
                remarks: this.formData.remarks
              }
              this.isCan = true;
              cancelInterview(params).then((res) => {
                let tempObj = res.data;
                console.log(res)
                if (tempObj.state === "0000") {
                  
                  this._showMessage("success", tempObj.message, function () {
                    self.$router.push("/arrange");
                  });
                }
              });
            })
            .catch(() => {});
        } else {
          this.isCan = false;
          return false;
        }
      });
    },
    _showMessage(type, msg, fn) {
      this.$message({
        showClose: false,
        message: msg,
        type: type,
        duration: 1500,
        onClose: function () {
          if (fn instanceof Function) {
            fn && fn();
          }
        },
      });
    },
  },
};
</script>
<style lang="scss">
@import "./../../assets/scss/mixins.scss";
@include resMessageBox;
.arrange-inp-box {
  margin-bottom: 20px;
  p {
    text-align: left;
    padding: 20px 20px 30px;
  }
  .tips {

  }
  .form-box {
    border-bottom: none;
    margin-top: 20px;
    margin-bottom: 20px;
    .el-form-item__content {
      width: 80%;
      text-align: left;
    }
    .el-date-editor.el-input,
    .form-box .el-date-editor.el-input__inner {
      width: 100%;
    }
    .arrange-form-item {
      float: none;
      margin: 0px auto;
    }
  }
  .send-ex {
    font-size: 12px;
    color: #999999;
  }
  .tips {
    color: #00A1D6;
    font-size: 12px;
  }
  .cancel-tips {
    color: #00A1D6;
    font-size: 12px;
    padding: 10px 0 20px 120px;
  }
}
</style>
